<!--
 * @Descripttion: 
 * @version: 
 * @Author: wtzhang
 * @Date: 2021-07-20 14:43:37
 * @LastEditors: wtzhang
 * @LastEditTime: 2021-07-20 16:54:53
-->
<template>
  <div>
    <h3>自定义hook函数</h3>
    <hr>
    <h4>鼠标随机点击页面，获取点击位置横纵坐标值</h4>
    x：{{x}}<br>
    y：{{y}}
    <hr>
    <h3>自定义hook函数封装axios请求</h3>
    <h3 v-if="loading">正在加载...</h3>
    <h3 v-else-if="errorMsg">错误信息：{{errorMsg}}</h3>
    <!-- 获取到对象数据 -->
    <ul v-else>
      <h4>获取到对象数据：</h4>
      <li>name: {{data.name}}</li>
      <li>message: {{data.message}}</li>
      <li>date: {{data.date}}</li>
    </ul>
    <hr>
    <!-- 获取到数组数据 -->
    <ul v-for="item in data" :key="item">
      <h4>获取到数组数据：</h4>
      <li>name: {{item.name}}</li>
      <li>message: {{item.message}}</li>
      <li>date: {{item.date}}</li>
    </ul>
  </div>
</template>

<script lang="ts">
/*
在组件中引入并使用自定义hook
自定义hook的作用类似于vue2中的mixin技术
自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂
*/
import useMousePosition from '../hooks/useMousePosition'
import useReauestApi from '../hooks/useRequestApi'
import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
export default defineComponent ({
  name: 'customHook',
  setup(){
    // const x = ref(-1)
    // const y = ref(-1)
    // // 声明一个点击事件回调函数
    // const clickHandler = (event:MouseEvent) => {
    //   x.value = event.pageX
    //   y.value = event.pageY
    // }
    // // 点击事件在页面加载完毕后，在进行操作
    // // 页面加载完毕后的生命周期组合API
    // onMounted(()=>{
    //   window.addEventListener('click', clickHandler)
    // })
    // // 页面销毁之前的生命周期组合API
    // onBeforeUnmount(()=>{
    //   window.removeEventListener('click', clickHandler)
    // })
    
    const { x, y } = useMousePosition()
    
    // 定义一个接口
    interface apiType {
      name: string;
      message: string;
      date: string
    }

    // 发送请求
    // const { loading1, data1, errorMsg1 } = useReauestApi<apiType>('/data/object.json') //获取对象数据
    const { loading, data, errorMsg } = useReauestApi<apiType>('/data/array.json') //获取数组数据
    
    
    return {
      x, 
      y,
      loading, 
      data, 
      errorMsg
    }
  }
})
</script>

<style lang="scss" scoped>
    
</style>